let path = require("path");
const webpack = require("webpack");
const ThemeColorReplacer = require("webpack-theme-color-replacer");
const { getThemeColors, modifyVars } = require("./src/utils/themeUtil");
const { resolveCss } = require("./src/utils/theme-color-replacer-extend");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
const pkg = require("./package.json");
const productionGzipExtensions = ["js", "css"];
const isProd = process.env.NODE_ENV === "production";

process.env.VUE_APP_VERSION = pkg.version;

// const assetsCDN = {
//   // webpack build externals
//   externals: {
//     vue: "Vue",
//     "vue-router": "VueRouter",
//     vuex: "Vuex",
//     axios: "axios",
//     nprogress: "NProgress",
//     clipboard: "ClipboardJS",
//     "@antv/data-set": "DataSet",
//     "js-cookie": "Cookies",
//   },
//   css: [],
//   js: [
//     "//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js",
//     "//cdn.jsdelivr.net/npm/vue-router@3.3.4/dist/vue-router.min.js",
//     "//cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js",
//     "//cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js",
//     "//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js",
//     "//cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js",
//     "//cdn.jsdelivr.net/npm/@antv/data-set@0.11.4/build/data-set.min.js",
//     "//cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js",
//   ],
// };

module.exports = {
  devServer: {
    port: 3000,
    hot: false,
    disableHostCheck: true,
    open: true,
    overlay: {
      warnings: false,
      errors: true,
    },
    watchOptions: {
      ignored: "/node_modules/",
      poll: false, // 每1000毫秒轮询一次
    },
    proxy: {
      "/api": {
        //此处要与 /services/api.js 中的 API_PROXY_PREFIX 值保持一致
        target: "http://localhost:8080",
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          "^/api": "/api",
          //pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
          //pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
        },
      },
    },
  },
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.resolve(__dirname, "./src/theme/theme.less")],
    },
  },
  configureWebpack: (config) => {
    config.entry.app = ["babel-polyfill", "whatwg-fetch", "./src/main.js"];
    config.performance = {
      hints: false,
    };
    config.plugins.push(
      new ThemeColorReplacer({
        fileName: "css/theme-colors-[contenthash:8].css",
        matchColors: getThemeColors(),
        injectCss: true,
        resolveCss,
      })
    );
    // Ignore all locale files of moment.js
    config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
    // 生产环境下将资源压缩成gzip格式
    if (isProd) {
      // add `CompressionWebpack` plugin to webpack plugins
      config.plugins.push(
        new CompressionWebpackPlugin({
          algorithm: "gzip",
          test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
          threshold: 10240,
          minRatio: 0.8,
        })
      );
    }
    // if prod, add externals
    if (isProd) {
      //config.externals = assetsCDN.externals;
    }
    config.output.jsonpFunction = `webpackJsonp-${pkg.name}`;

    config.module.rules.push({
      test: /\.(?:mjs)$/,
      use: {
        loader: "babel-loader",
        options: {
          presets: [["@babel/preset-env", { targets: "defaults" }]],
        },
      },
    });
  },
  chainWebpack: (config) => {
    // monaco-editor 编辑器
    config.plugin("monaco-editor").use(MonacoWebpackPlugin, [
      {
        // Languages are loaded on demand at runtime
        languages: ["json", "javascript", "html", "xml", "go", "typescript"],
      },
    ]);

    //SVG 字体
    const svgRule = config.module.rule("svg");
    svgRule.uses.clear();
    svgRule.use("vue-svg-loader").loader("vue-svg-loader");
    // 生产环境下关闭css压缩的 colormin 项，因为此项优化与主题色替换功能冲突
    if (isProd) {
      config.plugin("optimize-css").tap((args) => {
        args[0].cssnanoOptions.preset[1].colormin = false;
        return args;
      });
    }
    // 生产环境下使用CDN
    if (isProd) {
      config.plugin("html").tap((args) => {
        //args[0].cdn = assetsCDN;
        return args;
      });
    }
  },
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: modifyVars(),
          javascriptEnabled: true,
        },
      },
    },
  },
  publicPath:
    process.env.NODE_ENV === "production"
      ? process.env.VUE_APP_PUBLIC_PATH
      : "/",
  outputDir: "dist",
  assetsDir: "static",
  productionSourceMap: false,
};
